<!DOCTYPE html>
<html>
  <head>
    <title>ggSpamFree Chrome: Options</title>
    <link rel="icon" href="http://ggspamfree.googlecode.com/svn/trunk/art/icon.png"> 
    <style>
      html{height:100%; background:-webkit-gradient(radial, 625 650, 650, -550 450, 575, from(#587ba3), to(#58a35a), color-stop(.6,#FFFFFF)); background-attachment:fixed;}
      body {height:100%; font-size:10pt; font-family: "Bitstream Vera Sans", "Verdana", sans-serif; width: 600px; margin:0 auto; }
      img {height:80px;width:80px;float:left;margin-right:1em;}
      h1 {font-size:16pt;padding:0;margin:1em 0 .5em;}
      form {display:block;clear:both; padding-top:1em;}
      textarea {font:10pt sans-serif; width:100%; height: 120px; border:1px solid #ccc;}
      label {font-weight:bold;margin:1em 0 0 0;display:block;float:left;width:50%;}
      label div{margin:6px;}
      button {float:right; margin: 10px 0 10px 10px; padding:5px 10px;}
      a {color:#eee; font-weight:bold; text-decoration:none; text-shadow: black 1px 1px 4px }
      .panel,  .master textarea { 
        line-height:150%;
        border:4px solid white; background-color:#eee; 
        -webkit-border-radius:6px; 
        -webkit-box-shadow: 0px 0px 8px #fff;
        background: -webkit-gradient(radial, 560 500, 650, -550 450, 575, from(#587BA3), to(#58A35A), color-stop(.6,white))
       }
       .master {  margin:24px 0; padding-right:10px;}
       .panel {  padding:16px; }
      #status {position:absolute; margin-top:-24px;}
    </style>
    <script src="xhr.js"></script>
    <script type="text/javascript">

    function $e (id) { 
      var n = document.getElementById(id);
      n.hide = hide; n.show = show;
      return n;
    }
    function hide(){this.style.display = 'none'}
    function show(){this.style.display = 'inline-block'}

    var masterList = "http://ggspamfree.googlecode.com/svn/trunk/stopwords.txt";

    // Saves options to localStorage.
    function saveOptions() {
      localStorage.stopwords = $e("stopwords").value;
      localStorage.whitelist = $e("whitelist").value;
      $e("status").innerHTML = "Options Saved.";
      // setTimeout(function(){ $e("status").innerHTML = ""; }, 2000);
    }

    // Restore to saved value from localStorage.
    function restoreOptions() {
      $e("stopwords").value = localStorage.stopwords || '';
      $e("whitelist").value = localStorage.whitelist || '';
      $e("master").value = localStorage.master || '';
      if (localStorage.lastUpdate)
        $e("updated").innerHTML = timeFmt(localStorage.lastUpdate);
      // updateMaster();
    }
    
    // Restore to saved value from localStorage.
    function updateMaster() {
      updateMasterList(function(response) { 
        $e("master").value = response.master.trim();
        $e("updated").innerHTML = 
          timeFmt(localStorage.lastUpdate);
      });
    }

    function timeFmt(timeValue) {
      var date=new Date; date.setTime(timeValue);
      var delta=parseInt(((new Date()).getTime()-date.getTime())/1000);
      if (delta<60) return 'less than a minute ago';
      var minutes=parseInt(delta/60 +0.5);
      if (minutes <= 1) return 'about a minute ago';
      var hours=parseInt(minutes/60 +0.5);
      if (hours<1) return minutes+' minutes ago';
      if (hours==1) return 'about an hour ago';
      var days=parseInt(hours/24 +0.5);
      if (days<1) return hours+' hours ago';
      if (days==1) return 'yesterday';
      return days+' days ago';
    }

    </script>
  </head>
  <body onload="restoreOptions()">
    <form>
    
      <div class="panel">
    
        <img src="icon.png" />
        <h1>ggSpamFree Chrome: <span style="font-weight:normal">Options</span></h1>
        Google Groups Spam filter settings
        <div style="clear:both"></div>
        <label><div>Stopwords:<br /><textarea id="stopwords"></textarea></div></label>
        <label><div>Whitelist:<br /><textarea id="whitelist"></textarea></div></label>   
        <div style="clear:both"></div>
        <button onclick="saveOptions()">Save</button>
        <button>Restore</button>
        <div style="clear:both"></div>
        <span id="status"></span>
      
      </div>
      <div class="master">
        Master list checked <span id="updated"><b>never</b></span> (
          <a href="javascript:void(updateMaster())">Check now</a> | 
          <a id="showMaster" href="javascript:$e('master').show(); $e('showMaster').hide(); $e('hideMaster').show(); void(0)">Show</a>
          <a id="hideMaster" style="display:none" href="javascript:$e('master').hide(); $e('hideMaster').hide(); $e('showMaster').show(); void(0)">Hide</a>
          )
        <br />
        <br /><textarea style="display:none" disabled="disabled" id="master"></textarea>
      </div>
    </form>
  </body>
</html>
